<template>
  <div class="article-info-box flex-col-start">
    <div class="article-info-header flex-row-start">
      <div class="article-info-header-label">筛选</div>
      <el-select v-model="option.year" placeholder="请选择年份" size="mini">
        <el-option
            v-for="item in yearList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>

      <el-select v-model="option.month" placeholder="请选择月份" size="mini">
        <el-option
            v-for="item in monthList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>

      <el-select v-model="option.type" placeholder="请选择类型" size="mini">
        <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>

      <el-input v-model="option.keyword" placeholder="请输入内容" size="mini" style="margin-right: 5px">

      </el-input>
      <el-button icon="el-icon-search" size="mini" type="danger"></el-button>
    </div>
    <div class="article-info-body">
      <ArticleItem
          v-for="(article,index) in articleList"
          :key="index"
          :item="article" class="article-info-item" v-bind="$attrs">

      </ArticleItem>
    </div>
  </div>
</template>

<script>
import ArticleItem from "@/components/article/ArticleItem.vue";

export default {
  name: "ArticleInfoBox",
  components: {ArticleItem},
  props: {
    list: {
      type: Array
    }
  },
  data() {
    return {
      option: {
        year: "",
        month: "",
        type: "",
        keyword: ""
      },
      yearList: [
        {
          label: "不限",
          value: 0,
        }
      ],
      monthList: [
        {
          label: "不限",
          value: 0,
        }
      ],
      typeList: [
        {
          label: "不限",
          value: 0,
        }
      ],
      articleList: this.list
    }
  },
  methods: {
    initYearList() {
      let currYear = new Date().getFullYear();
      let yearLen = 5
      for (let i = currYear; i >= (currYear - yearLen); i--) {
        this.yearList.push({
          label: i,
          value: i
        })
      }
    },
    initMonthList() {
      for (let i = 1; i <= 12; i++) {
        this.monthList.push({
          label: i + "月",
          value: i
        })
      }
    },
    initTypeList() {

    }
  },
  watch: {
    list(newV) {
      this.articleList = newV
    }
  },
  created() {
    this.initYearList()
    this.initMonthList()
    this.initTypeList()
  }
}
</script>

<style lang="less" scoped>
.article-info-box {
  width: 100%;
  min-height: 60vh;

  .article-info-header {
    width: 100%;
    padding: 10px;

    .article-info-header-label {
      white-space: nowrap;
      font-size: 14px;
      color: #8c939d;
      margin-right: 5px;
    }

    .el-select {
      margin-right: 5px;
    }
  }

  .article-info-body {
    width: 90%;

    .article-info-item {
      width: 100%;
      height: 100px;
    }
  }
}
</style>